<template>
  <canvas id="three"></canvas>

</template>

<script>
import {initThree} from "@/utils/enviromentUtil";
import * as three from 'three'
import {GUI} from "three/examples/jsm/libs/lil-gui.module.min";

export default {
  name: "light",
  data() {
    return {
      scene: '',
      renderer: "",
      camera: "",
      orbitControls: "",
      whiteLight: ""
    }
  },
  mounted() {
    initThree.call(this, 100, 20, 0)

    this.camera.lookAt(0,0,0)

    //1、渲染器开启在场景中使用阴影贴图
    this.renderer.shadowMap.enabled = true



    this.initGeometries()
    this.initLight()
    this.playAnimation()
    this.addGUI()
  },
  methods: {
    initGeometries() {
      let sphere = new three.Mesh(new three.SphereGeometry(20), new three.MeshStandardMaterial())

      // 3、object3D对象开启被渲染到阴影贴图中
      sphere.castShadow = true

      this.scene.add(sphere)

      let plane = new three.Mesh(new three.PlaneGeometry(100, 100), new three.MeshStandardMaterial({side: three.DoubleSide}))
      plane.position.z = -20

      // 4、材质接收阴影
      plane.receiveShadow = true
      this.scene.add(plane)
    },

    initLight() {
      // 添加环境光
      let ambientLight = new three.AmbientLight(0xffffff, 0.5)
      this.scene.add(ambientLight)

      // 添加平行光
      let whiteLight = new three.DirectionalLight(0xffffff, 1)

      whiteLight.position.set(0, 30, 30)// new three.Vector3(0,0,10)

      // 2、开启灯光投射阴影
      whiteLight.castShadow = true

      // 调整阴影投射范围
      // 注意，默认的投射范围可能太小，会导致实际渲染的时候投射的阴影为矩形
      // 把下面6个变量调大即可，但是过大的数值可能严重影响性能
      const shadowCameraSize = 100; // 阴影投射范围的大小
      whiteLight.shadow.camera.near = 0.5
      whiteLight.shadow.camera.far = 100
      whiteLight.shadow.camera.left = -shadowCameraSize;
      whiteLight.shadow.camera.right = shadowCameraSize;
      whiteLight.shadow.camera.top = shadowCameraSize;
      whiteLight.shadow.camera.bottom = -shadowCameraSize;


      // 设置阴影贴图的模糊度
      whiteLight.shadow.radius = 20

      whiteLight.shadow.mapSize.set(1024, 1024)

      //const helper = new three.DirectionalLightHelper( whiteLight, 50 );

      this.whiteLight = whiteLight
      this.scene.add(whiteLight)
    },

    playAnimation() {

      let animate = () => {
        this.renderer.render(this.scene, this.camera)
        requestAnimationFrame(animate)
      }

      animate()
    },

    addGUI() {
      const gui = new GUI();
      gui.add(this.whiteLight.shadow.camera,"near").onChange(()=>{
        this.whiteLight.shadow.camera.updateProjectionMatrix()
      })
      gui.add(this.whiteLight.shadow.camera,"far").onChange(()=>{
        this.whiteLight.shadow.camera.updateProjectionMatrix()
      })
      gui.add(this.whiteLight.shadow.camera,"left").onChange(()=>{
        this.whiteLight.shadow.camera.updateProjectionMatrix()
      })
      gui.add(this.whiteLight.shadow.camera,"right").onChange(()=>{
        this.whiteLight.shadow.camera.updateProjectionMatrix()
      })
      gui.add(this.whiteLight.shadow.camera,"top").onChange(()=>{
        this.whiteLight.shadow.camera.updateProjectionMatrix()
      })
      gui.add(this.whiteLight.shadow.camera,"bottom").onChange(()=>{
        this.whiteLight.shadow.camera.updateProjectionMatrix()
      })
    },

  }
}
</script>

<style scoped>
#three {
  width: 100%;
  height: 100%;
}
</style>
